import { DatePicker, Modal } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd'
// import Input from 'rc-input';
import React, { useEffect, useState } from 'react';

import { stock_list_search } from '../../../utils/api/zqq/index'
import store from '../../../store/index'
import '../../../styles/qqiang/getinto.scss'

interface Props {
    changestockdata: Function
    stocklistcreat: Function
}

function StockListTop(props: Props) {
    //表单的双向绑定，保存表单数据
    var [form] = Form.useForm();
    const [stockdata, setStockdata] = useState('')
    const handlenchangestockdata = (event: any) => {
        const { value } = event.target
        // console.log(value);
        setStockdata(value)
    }
    //search事件
    var stocksearch = () => {
        stock_list_search({ stocktitle: stockdata }).then((res) => {
            console.log(res);
            props.changestockdata(res.data)
        })
    }
    //弹出框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    // 新建
    const onFinish = (data: Object) => {
        console.log(data);
        props.stocklistcreat(data)
        // stock_list_create(data).then((res) => {
        //     console.log(res);
        //     store.dispatch({ type: 'ADD', payload: res.data })
        // })
        setIsModalOpen(false);
    }
    return (
        <div className='getinto'>
            <div className='getintotop'>
                仓库管理 / 仓库列表
            </div>
            <div className='getintoinput'>
                <Input placeholder="请输入仓库ID" />
                <Input defaultValue={stockdata}
                    onChange={handlenchangestockdata} placeholder="请输入仓库名称" />
                <Input placeholder="请选择仓库等级" />
                <Input placeholder="请输入商家名称" />
                <Input placeholder="请选择状态" />
                <Button onClick={stocksearch} type="primary">搜索</Button>
                <Button onClick={showModal} type="primary" >创建</Button>
            </div>
            <Modal title="添加新的item" open={isModalOpen} onCancel={handleCancel} forceRender={true} footer={null} >
                <Form onFinish={onFinish} form={form}>
                    <Form.Item
                        name="key"
                        rules={[
                            {
                                required: true,
                                message: '请输入唯一标识key!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入唯一标识key" />
                    </Form.Item>
                    <Form.Item
                        name="stockid"
                        rules={[
                            {

                                required: true,
                                message: '请输入仓库ID!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入仓库ID" />
                    </Form.Item>

                    <Form.Item
                        name="stocktitle"
                        rules={[
                            {
                                required: true,
                                message: '请输入仓库名称!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入仓库名称" />
                    </Form.Item>

                    <Form.Item
                        name="stockaddress"
                        rules={[
                            {
                                required: true,
                                message: '请输入所属区县!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入所属区县" />
                    </Form.Item>

                    <Form.Item
                        name="servicecall"
                        rules={[
                            {
                                required: true,
                                message: '请输入服务电话!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入服务电话" />
                    </Form.Item>
                    <Form.Item
                        name="stocktype"
                        rules={[
                            {
                                required: true,
                                message: '请输入仓库类型!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入仓库类型" />
                    </Form.Item>
                    <Form.Item
                        name="stockdetailedaddress"
                        rules={[
                            {
                                required: true,
                                message: '请输入详情地址!',
                            },
                        ]}
                    >
                        <Input placeholder="请输入详情地址" />
                    </Form.Item>
                    <Form.Item
                        name="stockstate"
                        rules={[
                            {
                                required: true,
                                message: '更新状态',
                            },
                        ]}
                    >
                        <Input placeholder="更新状态" />
                    </Form.Item>
                    <Form.Item>
                        <Button block type="primary" htmlType="submit" shape="round">
                            确认更新
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default StockListTop;